<template>
    <!-- 步骤图片展示 -->
    <div class="box">
        <div class="spint">
            <div class="title1" >{{device_name}}</div>
            <div class="spinner" :class="{'overfow':info.length>15}">
                <!-- <div  v-for="(item,index) in info" :key="index" >
                    <div class="btn_box" @click="clickNum(index)" :class="{'hove':hove==index, 'child':hove>index}" >  
                        {{ item.orderNum }} : {{ item.deptName }}
                    </div>
                </div> --> 
                <div  v-for="(item,index) in csdata" :key="index" >
                    <div class="btn_box"  :class="{'hove':hove==index}" @click="clickNum(index,item)">  
                        {{ item.deptName }}
                    </div>
                    <div v-for="(item1,index1) in item.children" :key="index1" >
                        <el-collapse-transition>
                            <div v-show="item1.parentId == parentId"  class="btn_box child" @click="clickNum(index1+'child',item, item1)" :class="{'hove':hove==index1+'child'}">  
                                {{ item1.deptName }}
                            </div>
                        </el-collapse-transition>
                    </div>
                </div>
            </div>
            <span class="light-corner"></span>
            <span class="light-corner"></span>
            <span class="light-corner"></span>
            <span class="light-corner"></span>
        </div>
        <div class="imgshow">
            <div class="lignBg">
                <div class="title" > {{ deptName }} </div>
                <div class="img_bg">
                    <el-image class="imagePreview" :src="src" :preview-src-list="[src]">
                        <div slot="error" class="image-slot">
                            
                        </div>
                    </el-image>
                </div>
                <span class="light-corner"></span>
                <span class="light-corner"></span>
                <span class="light-corner"></span>
                <span class="light-corner"></span>
            </div>
        </div>
    </div>
</template>

<script>

    export default {
        props:{
            info:{
                type: Array,
                default:()=>[]
            },
            apiHost:{
                type: String,
                default:()=>''
            },
            device_name:{
                type: String,
                default:()=>''
            },
        },
        data() {
            return {
                hove:0,
                mun: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19],
                src:"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
                deptName: "",
                csdata: [],
                parentId: "",
            }
        },
        methods: {
            clickNum(index,item,item1){
                this.hove = index
                
                this.parentId = !item1 ? item.deptId  : item1.parentId
                // 图片上传
                // this.src = this.apiHost + ( !item1 ? item.email  : item1.email)
                // 图片编辑
                this.src = !item1 ? item['phone']  : item1['phone']
                this.deptName =!item1 ? item['deptName']  : item1['deptName']
                this.$emit('clickStep',item1?item1:item)
            },
            // 构造树型结构数据
            handleTree(data, id, parentId, children) {
                let config = {
                    id: id || 'id',
                    parentId: parentId || 'parentId',
                    childrenList: children || 'children'
                };

                var childrenListMap = {};
                var nodeIds = {};
                var tree = [];

                for (let d of data) {
                    let parentId = d[config.parentId];
                    if (childrenListMap[parentId] == null) {
                    childrenListMap[parentId] = [];
                    }
                    nodeIds[d[config.id]] = d;
                    childrenListMap[parentId].push(d);
                }

                for (let d of data) {
                    let parentId = d[config.parentId];
                    if (nodeIds[parentId] == null) {
                    tree.push(d);
                    }
                }

                for (let t of tree) {
                    adaptToChildrenList(t);
                }

                function adaptToChildrenList(o) {
                    if (childrenListMap[o[config.id]] !== null) {
                    o[config.childrenList] = childrenListMap[o[config.id]];
                    }
                    if (o[config.childrenList]) {
                    for (let c of o[config.childrenList]) {
                        adaptToChildrenList(c);
                    }
                    }
                }
                // 递归树型结果根据orderNum排序
                function sortTree(tree) {
                    tree.sort((a, b) => a.orderNum - b.orderNum);
                    for (const t of tree) {
                    if (t.children) {
                        sortTree(t.children);
                    }
                    }
                }
                sortTree(tree);
                return tree;
            }
        },
        created(){
            
        },
        watch: {
            info:{
                handler(val){
                    // 图片上传
                    //this.src = this.apiHost + val[0]['email'],
                    // 图片编辑
                    this.src = val[0]['phone']
                    this.$emit('clickStep',val[0])
                    this.deptName = val[0]['deptName']
                    this.parentId = val[0]['deptId']
                    this.csdata = this.handleTree(val,'deptId')
                },
                deep:true
            }
        }
    }
</script>

<style lang="scss" scoped>
.box{
    width: 100%;
    height: 90vh;
}
.spint{
    // background: red;
    position: relative;
    width: 10%;
    margin-right: 3%;
    padding: 10px;
    .overfow{
        overflow-y: scroll;
    }
    .spinner{
        width: 111%;
        height: 88vh;
        padding-right: 15px;
        
    /*感动条整体样式*/
    &::-webkit-scrollbar{
        width:6px;/*德动条的慈度*/
        background: #fff;
    }

    &::-webkit-scrollbar-track {
        background: #fff;
        border-radius: 10px;
        color: #fff;
    }

    &::-webkit-scrollbar-thumb 
    {background:#00c3ff;/*将英的育景色*/
        border-radius:5px;/*将获的圆*/
    }
    // 1当解标是停在感动条上时将块的样式
    &::-webkit-scrollbar-thumb:hover{
            background:#4cc9f0;/*将获的背最色*/
        }
    }
}
.btn_box{
    border: 1px solid #4cc9f0;;
    background-color:transparent;
    text-transform:uppercase;
    font-size: 14px;
    padding: 8px 15px;
    font-weight: 300;
    margin-bottom: 15px;
    color: #4cc9f0;;
    border-radius: 10px;
    cursor: pointer;
}
.spinner .child{
   width: 67px;
    margin-left: 40px;
    margin-right: 0;
    // transition:  1s ease-out;
}
.btn_box:hover, .hove{
    color: white;
    border:0;
}
.btn_box:hover, .hove{
    background-color:#4cc9f0;
    -webkit-box-shadow:10px 10px 99px 6px rgba(76,201,240,1);
    -moz-box-shadow:10px 10px 99px 6pxrgba(76,201,240,1);
    box-shadow:10px 10px 99px 6px rgba(76,201,248,1);
    transition:all ease-in 0.5s;
}
.imgshow{
    background: blue;
    width: 95%;
}
.lignBg{
    height: 89vh;
    .title{
        color: #fff;
    }
}
.img_bg{
    height: 92%;
}
.imagePreview{
    width: 100%;
    height: 100%;
    border-radius: 5%;
}

.title1{
    font-size: 20px;
    padding-bottom: 10px;
    color: #fff;
}


.title{
    font-size: 24px;
    background: url('@/assets/title_gj.png');
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: contain;
    cursor: pointer;
}
.boxImg{
    margin-top: 20px;
    width: 145px;
    // height: 300px;
    background-image:  url('@/assets/data_bg.png');
    background-color: #001739;
    p{
        font-size: 18px;
        padding-bottom: 10px;
    }
    span{
        color: #02cbff;
        font-weight: 400;
        font-size: 22px;
        display: block;
        margin-top: 10px;
    }
}
.imgUp{
    width: 100%;
    height: 145px;
    
}

</style>